<template>
  <div class="header-total">
    <!--顶部快捷导航栏开始-->
    <section class="shortcut">
      <div class="heart">
        <!--快捷导航左侧部分-->
        <div class="fleft">
          <ul>
            <li>你好！</li>
            <li v-if="!userName">
              <!--router-link导航必须要有to属性-->
              <router-link to="/login">请登录</router-link>
              <router-link to="/register" class="style_red"
                >免费注册</router-link
              >
            </li>
            <li v-else>
              <!--router-link导航必须要有to属性-->
              <router-link to="/center">{{ userName }}</router-link>
              <a @click="logout" style="cursor: pointer">退出登录</a>
            </li>
          </ul>
        </div>
        <!--快捷导航右侧部分-->
        <div class="fright">
          <ul class="line">
            <li>
              <router-link to="/center/myorder">我的订单</router-link>
            </li>
            <li></li>
            <li><router-link to="/shopcart">我的购物车</router-link></li>
            <li></li>
            <li><a href="#">我的服务</a><i class="iconfont">&#xe8d7;</i></li>
            <li></li>
            <li><a href="#">我的会员</a></li>
            <li></li>
            <li><a href="#">企业采购</a></li>
            <li></li>
            <li><a href="#">客户服务</a></li>
            <li></li>
            <li><a href="#">合作招商</a></li>
            <li></li>
            <li><a href="#">商家后台</a><i class="iconfont">&#xe8d7;</i></li>
          </ul>
        </div>
      </div>
    </section>
    <!--顶部快捷导航栏结束-->
    <!--头部模块开始-->
    <header class="header-bar heart">
      <!--logo模块开始-->
      <div class="logo">
        <h1>
          <router-link to="/home">shoping首页</router-link>
        </h1>
      </div>
      <!--logo模块结束-->
      <!--搜索模块开始-->
      <div class="search">
        <input
          type="search"
          name=""
          id=""
          placeholder="请输入搜索内容"
          v-model="keyword"
        />
        <button @click="goSearch">搜索</button>
      </div>
      <!--搜索模块结束-->
      <!--热点词模块开始-->
      <div class="hotwords">
        <a href="#" class="style_red">全民种植季</a>
        <a href="#">京东京造</a>
        <a href="#">邮币节 </a>
        <a href="#">Watch</a>
        <a href="#">新品上市</a>
        <a href="#">Neo6上市</a>
        <a href="#">低至5折 </a>
        <a href="#">智能手表</a>
      </div>
      <!--热点词模块结束-->
      <!--购物车模块开始-->
      <div class="shopcar">
        <i class="iconfont">&#xe61b;</i>
        <i class="count">{{ cartNum }}</i>
        <router-link to="/shopcart">我的购物车</router-link>
        <span class="iconfont">&#xe8d7;</span>
      </div>
      <!--购物车模块结束-->
    </header>
    <!--头部模块结束-->
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "",
  data() {
    return {
      keyword: "",
    };
  },
  methods: {
    goSearch() {
      if (this.$route.query) {
        let location = {
          name: "search",
          params: { keyword: this.keyword || undefined },
        };
        location.query = this.$route.query;
        this.$router.push(location);
      }
    },
    //退出登录
    async logout() {
      try {
        await this.$store.dispatch("userLogout");
        this.$store.dispatch("getCartList");
        this.$router.push("/home");
      } catch (error) {
        alert(error.message);
      }
    },
  },
  mounted() {
    this.$bus.$on("clear", () => {
      this.keyword = "";
    });
    this.$store.dispatch("getCartList");
  },
  computed: {
    ...mapGetters(["cartList"]),
    cartInfoList() {
      return this.cartList.cartInfoList || [];
    },
    //登陆后的用户名信息
    userName() {
      return this.$store.state.user.userInfo.name;
    },
    cartNum() {
      return this.cartInfoList.length;
    },
  },
};
</script>

<style lang="css" scoped>
/*快捷导航模块*/
.shortcut {
  width: 100%;
  height: 30px;
  line-height: 30px;
  background-color: #f4f4f4;
}
.shortcut ul li {
  float: left;
}
.shortcut ul li a {
  margin-left: 6px;
}
.fleft {
  float: left;
}
.fright {
  float: right;
}
.shortcut ul li .iconfont {
  font-size: 8px;
  margin-left: 2px;
}

/*头部模块*/
.header-bar {
  position: relative;
  height: 120px;
}
.logo {
  position: absolute;
  top: 10px;
  width: 100px;
  height: 105px;
}
.logo a {
  display: block;
  width: 100px;
  height: 105px;
  background: url(./images/logo.png) no-repeat;
  background-size: 100%; /*背景大小自适应*/
  text-indent: -800px;
  overflow: hidden; /*链接文字实现隐藏*/
}
.search {
  position: absolute;
  left: 260px;
  top: 30px;
  width: 538px;
  height: 36px;
}
.search input {
  float: left;
  width: 455px;
  height: 36px;
  padding-left: 16px;
  border: 2px solid #e2231a;
}
.search button {
  float: left;
  width: 82px;
  height: 36px;
  background-color: #e2231a;
  border: 2px solid #e2231a;
  font-size: 16px;
  color: white;
}
/*热点词模块*/
.hotwords {
  position: absolute;
  top: 66px;
  left: 260px;
}
.hotwords a {
  margin-right: 10px; /*行内元素可以指定左右margin*/
}
/*购物车模块*/
.shopcar {
  position: absolute;
  right: 170px;
  top: 30px;
  width: 130px;
  height: 35px;
  line-height: 34px;
  text-align: center;
  border: 1px solid #eee;
}
.shopcar span {
  font-size: 12px;
}
.count {
  position: absolute;
  top: -6px;
  left: 29px;
  height: 14px;
  line-height: 14px;
  color: white;
  background-color: #e2231a;
  padding: 0 5px;
  border-radius: 7px 7px 7px 0;
}
</style>
